<template>
  <div class="mod-service-notifyTemplate">
    <!-- 搜索相关区域 -->
    <div class="search-bar">
      <el-form
        @submit.native.prevent
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
        size="small"
        ref="searchForm"
      >
        <div class="input-row">
          <el-form-item label="门店名称">
            <el-input
              v-model="searchForm.shopName"
              placeholder="请输入门店名称"
            />
          </el-form-item>
          <el-form-item label="图片名称">
            <el-input
              v-model="searchForm.fileName"
              placeholder="请输入门店名称"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="searchForm.auditStatus"
              size="small"
              clearable
              placeholder="选择状态"
            >
              <el-option
                v-for="item in auditStatusList"
                :key="item.key"
                :label="item.name"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="上传时间">
            <el-date-picker
              v-model="timer"
              type="datetimerange"
              range-separator="至"
              :start-placeholder="this.$i18n.t('shopProcess.startTime')"
              :end-placeholder="this.$i18n.t('shopProcess.endTime')"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="small"
              @change="changeTimer"
              :clearable="false"
              :default-time="['00:00:00', '23:59:59']"
            />
          </el-form-item>
          <el-form-item>
            <div
              class="default-btn primary-btn"
              @click="handleCurrentChange(1)"
            >
              {{ $t("product.search") }}
            </div>
            <div class="default-btn" @click="resetSearchForm('searchForm')">
              {{ $t("product.reset") }}
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="main-container">
      <div class="table-con prod-table">
        <el-table
          :data="dataList"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          style="width: 100%"
        >
          <el-table-column
            label="门店名称"
            align="center"
            prop="shopName"
            width="120"
          >
          </el-table-column>
          <el-table-column label="图片" align="center" prop="filePath">
            <template slot-scope="scope">
              <!-- 渲染图片 -->
              <div class="img-container">
                <el-image
                  :src="resourcesUrl + scope.row.filePath"
                  :preview-src-list="[resourcesUrl + scope.row.filePath]"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="图片名称"
            prop="fileName"
            width="200"
          >
          </el-table-column>
          <el-table-column align="center" label="图片类型" prop="fileType">
          </el-table-column>
          <el-table-column
            align="center"
            label="上传时间"
            prop="uploadTime"
            width="180"
          >
          </el-table-column>
          <el-table-column align="center" label="状态" prop="auditStatus">
            <template slot-scope="scope">
              <el-tag
                :type="mapStatusDesc(scope.row.auditStatus).type"
                effect="plain"
                size="medium"
              >
                {{ mapStatusDesc(scope.row.auditStatus).name }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('publics.operating')"
            fixed="right"
            width="100"
          >
            <template slot-scope="scope">
              <div class="text-btn-con" v-if="scope.row.auditStatus == 0">
                <div
                  class="default-btn text-btn"
                  @click="handlePass(scope.row, true)"
                >
                  通过
                </div>
                <div
                  class="default-btn text-btn"
                  @click="handlePass(scope.row, false)"
                >
                  驳回
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="dataList.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        dataList: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10, // 每页显示多少条
        },
        searchForm: {}, // 搜索
        dataListLoading: false,
        auditStatusList: [
          {
            key: 0,
            name: "待审核",
            type: "warning",
          },
          {
            key: 1,
            name: "已通过",
            type: "",
          },
          {
            key: 2,
            name: "已驳回",
            type: "danger",
          },
        ],
        timer: null,
      };
    },
    components: {},
    computed: {
      mapStatusDesc() {
        return (status) => {
          let [item] = this.auditStatusList.filter((item) => item.key == status);
          return item;
        };
      },
    },
    created() {
      this.getDataList();
    },
    mounted() {},
    methods: {
      getDataList(page) {
        this.dataListLoading = true;
        this.$http({
          url: this.$http.adornUrl("/admin/file/auditFilePage"),
          method: "get",
          params: this.$http.adornParams(
            Object.assign(
              {
                current: page == null ? this.page.currentPage : page.currentPage,
                size: page == null ? this.page.pageSize : page.pageSize,
              },
              this.searchForm
            )
          ),
        }).then(({ data }) => {
          this.dataList = data ? data.records : [];
          this.page.total = data ? data.total : 0;
          this.dataListLoading = false;
          console.log(this.dataList);
        });
      },
      changeTimer(t) {
        if (t) {
          this.searchForm.startTime = t[0];
          this.searchForm.endTime = t[1];
        } else {
          delete this.searchForm.startTime;
          delete this.searchForm.endTime;
        }
      },
      handlePass(row, isPass) {
        this.$confirm(
          `是否 [${isPass ? "通过" : "驳回"}] 当前图片的审核。`,
          this.$i18n.t("remindPop.remind"),
          {
            confirmButtonText: this.$i18n.t("remindPop.confirm"),
            cancelButtonText: this.$i18n.t("remindPop.cancel"),
            type: isPass ? "warning" : "warning",
          }
        )
          .then(() => {
            this.$http({
              url: this.$http.adornUrl("/admin/file/audit"),
              method: "put",
              data: {
                fileId: row.fileId,
                auditStatus: isPass ? 1 : 2,
              },
            }).then((res) => {
              if (res.code == "00000") {
                this.$message({
                  message: this.$i18n.t("publics.operation"),
                  type: "success",
                  duration: 2000,
                });
                this.getDataList();
              }
            });
          })
          .catch(() => {});
      },
      /**
       * 刷新回调
       */
      refreshChange() {
        this.getDataList(this.page);
      },
      searchChange(params) {
        this.searchForm = params;
        this.getDataList(this.page);
      },
      handleSizeChange(val) {
        this.page.pageSize = val;
        this.getDataList();
      },
      handleCurrentChange(val) {
        this.page.currentPage = val;
        this.getDataList();
      },
      /**
       * 重置表单
       * @param {String} formName 表单名称
       */
      resetSearchForm(formName) {
        this.searchForm = {};
        this.timer = null;
        this.$refs[formName].resetFields();
      },
    },
  };
</script>
<style lang="scss" scoped>
  .img-container {
    max-width: 100px;
    max-height: 100px;
    margin: 0 auto;
  }
  .status0 {
    color: #e6a23c;
  }
  .status1 {
    color: #409eff;
  }
  .status2 {
    color: #f56c6c;
  }
</style>
